<template>
    <BasePage>
        <el-form slot="form" :inline="true" size="medium" @submit.native.prevent>
            <el-form-item label="所属高速">
                <el-select v-model="form.highwayId" placeholder="请选择" filterable clearable style="width: 100%">
                    <el-option v-for="item in highwayOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="方向">
                <el-select v-model="form.direction" placeholder="请选择" clearable style="width: 100%">
                    <el-option v-for="d in DirectionsOptions" :key="d.value" :label="d.label" :value="d.label" />
                </el-select>
            </el-form-item>
            <el-form-item label="管养单位">
                <CustodyOrgSelect :value.sync="form.managementId" filterable clearable></CustodyOrgSelect>
            </el-form-item>

            <el-form-item>
                <BaseButton v-permission="{ btnCode: '' }" @click="handleFilter">查询</BaseButton>
                <BaseButton type="second" @click="resetConditions">重置</BaseButton>
            </el-form-item>
        </el-form>

        <div slot="button">
            <BaseButton v-permission="{ btnCode: '' }" style="margin-right: 8px" @click="handleAdd">新增</BaseButton>
            <ExcelImport v-permission="{ btnCode: '' }" :model="model" @success="handleFilter"></ExcelImport>
            <BaseButton v-permission="{ btnCode: '' }" type="second" :loading="downloadLoading" @click="handleDownload">导出</BaseButton>
        </div>

        <!--数据列表区-->
        <BaseTable
            slot="table"
            v-loading="listLoading"
            :columns="columns"
            :data="list"
            row-key="id"
            height="calc(100% - 73px)"
            highlight-current-row
            @selection-change="handleSelectionChange"
            >>
            <template #code="{ scope: { row } }">
                <BaseButton type="text" @click="handleDetail(row.id, row.code)">{{ row.code }}</BaseButton>
            </template>
            <template #handle="{ scope: { row } }">
                <BaseButton v-permission="{ btnCode: '' }" type="text" @click="handleEdit(row.id)">编辑</BaseButton>
                <BaseButton v-permission="{ btnCode: '' }" type="text" color="danger" @click="handleDelete(row.id)">删除</BaseButton>
            </template>
        </BaseTable>
        <!--分页组件-->
        <Pagination
            slot="pagination"
            :current-page.sync="page.pageNo"
            :page-size.sync="page.pageSize"
            :total="page.total"
            @current-change="getList"
            @size-change="getList"
        />
    </BasePage>
</template>

<script>
import BasePage from '@/layouts/BasePage'
import ExcelImport from '@/components/ExcelImport'
import reconfirm from '@/utils/reconfirm'
import { {{modelName}}, LineHighwayModel } from '@/models'
import { {{apiName}} } from '@/api'
import KeepAliveHandler from '@/mixins/keepAliveHandler'
import { DirectionsOptions } from '@/views/asset-management/constants'

import downLoad from '@/utils/blob-download'

export default {
    name: '{{upperCaseName}}List',
    components: {
        BasePage,
        ExcelImport
    },
    mixins: [
        KeepAliveHandler({
            defaultCondition: {
                highwayId: '',
                direction: '',
                managementId: ''
            },
            conditionObjKey: 'form'
        })
    ],
    data() {
        return {
            DirectionsOptions,
            highwayOptions: [],
            downloadLoading: false,
            model: new {{modelName}}(),
            lineHighwayModel: new LineHighwayModel(),
            api: new {{apiName}}(),
            form: {
                highwayId: '',
                direction: '',
                managementId: ''
            },
            listLoading: true,
            list: [],
            page: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            columns: Object.freeze([
                {
                    attrs: {
                        type: 'selection'
                    }
                },
                {
                    slot: 'code',
                    attrs: {
                        prop: 'code',
                        label: '线路编码',
                        width: '160',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'highwayName',
                        label: '所属高速',
                        'show-overflow-tooltip': true,
                        'min-width': '160'
                    }
                },
                {
                    attrs: {
                        prop: 'name',
                        label: '线路名称',
                        'show-overflow-tooltip': true,
                        'min-width': '180'
                    }
                },
                {
                    attrs: {
                        prop: 'characterCode',
                        label: '字符编码',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'direction',
                        label: '方向',
                        'show-overflow-tooltip': true,
                        width: '140'
                    }
                },
                {
                    attrs: {
                        prop: 'startingPointStake',
                        label: '起点桩号',
                        'show-overflow-tooltip': true,
                        width: '140'
                    }
                },
                {
                    attrs: {
                        prop: 'terminalPointStake',
                        label: '终点桩号',
                        'show-overflow-tooltip': true,
                        width: '140'
                    }
                },
                {
                    attrs: {
                        prop: 'length',
                        label: '长度(m)',
                        'show-overflow-tooltip': true,
                        'min-width': '140'
                    }
                },
                {
                    attrs: {
                        prop: 'managementName',
                        label: '管养单位',
                        'show-overflow-tooltip': true,
                        'min-width': '120'
                    }
                },
                {
                    attrs: {
                        prop: 'updateUserName',
                        label: '最近修改人',
                        'show-overflow-tooltip': true,
                        width: '110',
                        fixed: 'right'
                    }
                },
                {
                    attrs: {
                        prop: 'updateTime',
                        label: '最近修改时间',
                        'show-overflow-tooltip': true,
                        width: '170',
                        fixed: 'right'
                    }
                },
                {
                    slot: 'handle',
                    attrs: {
                        label: '操作',
                        width: '150',
                        fixed: 'right'
                    }
                }
            ]),
            selectionList: []
        }
    },
    created() {
        this.getHighwayList()
        this.getList()
    },
    methods: {
        getList() {
            this.listLoading = true
            this.model
                .getList(this.form, this.page)
                .then(res => {
                    this.list = res.list
                    this.page.total = res.totalCount
                })
                .finally(() => {
                    this.listLoading = false
                })
        },
        getHighwayList() {
            this.lineHighwayModel.getList({}, { pageNo: 1, pageSize: 10000 }).then(res => {
                this.highwayOptions = (res.list || []).map(item => {
                    return {
                        label: item.name,
                        value: item.id
                    }
                })
            })
        },
        // 查询
        handleFilter() {
            this.page.pageNo = 1
            this.getList()
        },
        handleDetail(id, code) {
            this.$router.push({ name: '{{upperCaseName}}Detail', query: { id, code, type: 'detail' } })
        },
        handleAdd() {
            this.$router.push({ name: '{{upperCaseName}}Add' })
        },
        handleEdit(id) {
            this.$router.push({ name: '{{upperCaseName}}Edit', query: { id, type: 'edit' } })
        },
        handleDelete(id) {
            reconfirm({
                text: '是否删除当前数据',
                callback: () => {
                    console.log(id)
                    return this.model.delete({ id }).then(() => {
                        this.getList()
                        this.$message.success('删除成功!')
                    })
                }
            })
        },
        handleDownload() {
            this.downloadLoading = true
            const path = this.api.customDownloadPath()
            const ids = this.selectionList.map(item => item.id)
            downLoad(path, { ids, ...this.form }, 'xxx信息表', 'Excel', () => {
                this.downloadLoading = false
            })
        },
        handleSelectionChange(value) {
            this.selectionList = value
        }
    }
}
</script>

<style lang="scss" scoped></style>
